<template>
  <div>
    <el-dialog
      title="点检角色列表"
      :visible.sync="dialogVisible"
      @close="closeOpen"
      :modal="true"
      :appendToBody="true"
      width="500px"
      v-dialog-drag
      :close-on-click-modal="false"
      :top="scrollTop"
    >
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        style="margin-bottom: 10px"
      >
      </el-input>
      <el-tree
        :data="dept"
        :check-strictly="true"
        show-checkbox
        check-on-click-node
        :expand-on-click-node="false"
        node-key="rolecode"
        ref="tree"
        highlight-current
        :default-checked-keys="checkedkey"
        :filter-node-method="filterNode"
        :default-expanded-keys="ids"
        :props="defaultProps"
        v-if="dialogVisible"
        v-loading="loading"
        style="max-height: 600px;overflow: auto"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false;num = 2">保 存</el-button>
        <el-button @click="dialogVisible= false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request';

  export default {
    name: "index",
    data(){
      return {
        dialogVisible:this.visibles,
        filterText:'',
        num:'',
        ids:'',
        dept:[],
        defaultProps: {
          children: 'children',
          label: 'rolename'
        },
        uniqueValue:'',
        checkedkey:[],
        loading:true,
        scrollTop: null ,

      }
    },
    props: ['visibles','id'],
    created() {

    },
    watch:{
      'visibles':function(){
        this.dialogVisible = this.visibles;
        this.ids = this.id?.split(',') || [];
        if (this.dialogVisible === false){
          this.num = '';
          this.filterText = '';
        }else{
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(this.ids);
            this.$refs.tree.setCurrentKey(this.ids);
          });
          this.getDept();
        }
      },
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      closeOpen() {
        var ids = this.$refs.tree.getCheckedKeys();
        var arr = [];
        if (ids.length > 0){
          for (let i = 0; i < ids.length;i++){
            let obj = {};
            obj.id = this.$refs.tree.getNode(ids[i]).key;
            obj.name = this.$refs.tree.getNode(ids[i]).label;
            arr.push(obj);
          }
        }
        if (this.num == 2) {
          this.$emit('closeDialog',arr)
        } else {
          this.$emit('closeDialog')
        }
      },
      //获取领料单数据
      getDept() {
        this.loading = true;
        var that = this;
        request({
          url: '/system/role/roleCheckupTreeselect',
          method: 'get'
        }).then(res=>{
          var list = res.roles;
          list.forEach(item=>{
            if (item.prop1 != 2){
              item.disabled = true
            }
          })
          that.dept = that.handleTree(list, 'rolecode', 'prop2', null, '-1');
          console.log(that.dept)
          that.loading = false;
        }).catch(err=>{
          that.$message.error('数据获取失败！');
          that.loading = false;
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.rolename.indexOf(value) !== -1;
      },
      parentModules(data,checkbox,node){
        if(checkbox){
          // 后端返回的node-key不是id，是moduldCode
          this.$refs.tree.setCheckedKeys([data.rolecode]);
          this.$refs.tree.setCurrentKey(data.rolecode);
          this.uniqueValue =  this.$refs.tree.getCheckedKeys();
        }else{
          this.uniqueValue =  this.$refs.tree.getCheckedKeys();
          if(this.uniqueValue.length == 0){
            this.uniqueValue = ''
          }
        }
      },
    },
    mounted() {
      this.utils.mounteds(this);
    },
    destroyed() {
      this.utils.destroyeds(this);
    },
  }
</script>

<style scoped>

</style>
